<template>
  <div>
    <BreadCrumbShow />

    <div class="apply-operate">
      <el-select
        v-model="selectData.operateType"
        placeholder="监测方式"
        size="medium"
        @change="changeSelect"
        clearable
      >
        <el-option
          v-for="item in selectOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <ExcelButton @outExcel="outExcel" :isExcelLoading="isExcelLoading" />
    </div>

    <ElTable
      refName="warehousingRecordList"
      @pageChange="pageChange"
      @selectionChange="selectionChange"
      :data-source="recordList"
      :data-config="tableConfig"
      :total="total"
      :pageSize="pageSize"
      :pageNum="pageNum"
      :isLoading="isLoading"
    >
      <!-- <template #lookTypeHeader>
        <div class="header-select">
          <el-select
            v-model="lookTypeHeader"
            placeholder="监测方式"
            size="medium"
            @change="changeSelect"
            clearable
          >
            <el-option
              v-for="item in tableConfig.filter((e) => e.prop == 'lookType')[0]
                .selectOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </template> -->

      <template #warehouseTypeHeader>
        <div class="header-select">
          <el-select
            v-model="warehouseTypeHeader"
            placeholder="类型"
            size="medium"
            @change="changeSelect"
          >
            <el-option
              v-for="item in tableConfig.filter(
                (e) => e.prop == 'warehouseType'
              )[0].selectOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </template>

      <template #createdOnHeader>
        <div class="header-select">
          <div style="line-height: 40px">操作时间</div>
          <el-date-picker
            @change="changeSelect"
            v-model="createdOnHeader"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            prefix-icon="el-icon-date"
          >
          </el-date-picker>
        </div>
      </template>

      <template #warehouseType="{ scope }">
        <span>{{ commonFun.getLabel(boxLogLabel, scope.row.action) }}</span>
      </template>
    </ElTable>
  </div>
</template>

<script>
import axios from "axios";
import ElTable from "@/components/table/ElTable.vue";
import ExcelButton from "@/components/public-style/ExcelButton";
import { getInOrOutLogList } from "@/api/access-manage/index";
import Cookies from "js-cookie";
import { boxLogLabel } from "@/utils/dictionary.js";

export default {
  name: "warehousingRecord",
  data() {
    return {
      boxLogLabel: boxLogLabel,
      warehouseType: 0,
      lookTypeHeader: undefined,
      warehouseTypeHeader: undefined,
      createdOnHeader: [],

      recordList: [],

      userInfo: {},

      uploadFile: {},
      selectedList: [],
      pageTitle: "出入库列表",
      toApplyNum: 0,

      selectOption: [
        { label: "员工操作", value: 1 },
        { label: "进出库检测仪", value: 0 },
      ],

      tempBoxList: [],
      tableConfig: [
        {
          prop: "boxCode",
          label: "窍编码",
        },
        // {
        //   prop: "lookType",
        //   label: "监测方式",
        //   selectOption: [
        //     { label: "员工操作", value: "1" },
        //     { label: "进出库检测仪", value: "0" },
        //   ],
        // },
        {
          prop: "warehouseType",
          label: "类型",
          selectOption: [
            { label: "入库", value: 0 },
            { label: "出库", value: 1 },
          ],
        },
        {
          prop: "createdOn",
          label: "操作时间",
          selectOption: [],
        },
        {
          prop: "operator",
          label: "操作人",
        },
      ].filter((v) => v),
      isLoading: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      selectData: {
        operateType: null,
      },
      isExcelLoading: false,
    };
  },
  components: {
    ElTable,
    ExcelButton,
  },
  mounted() {
    //   4 入库  5出库

    this.warehouseType = this.$route.params.type;
    this.userId = this.$route.params.userId;
    if (this.warehouseType) {
      // 有传参 则查询当天
      this.createdOnHeader = [
        new Date(new Date(new Date().toLocaleDateString()).getTime()),
        new Date(
          new Date(new Date().toLocaleDateString()).getTime() +
            (24 * 60 * 60 - 1) * 1000
        ),
      ];
    }

    if (this.warehouseType == 4) {
      this.warehouseTypeHeader = 0;
    } else if (this.warehouseType == 5) {
      this.warehouseTypeHeader = 1;
    }

    this.userInfo = JSON.parse(Cookies.get("userInfo"));

    this.getWarehouseRecord();
  },
  methods: {
    // 分页变化
    pageChange(emitData) {
      this.pageNum = emitData.pageNum;
      this.pageSize = emitData.pageSize;
      this.getWarehouseRecord();
    },
    // 头部筛选项变化
    changeSelect() {
      // let arr = [];
      // if (this.warehouseTypeHeader == 1) {
      //   // 入库
      //   arr = [12, 13, 17];
      //   if (this.lookTypeHeader == 2) {
      //     arr = [13]; // 门禁
      //   } else if (this.lookTypeHeader == 1) {
      //     arr = [12, 17];
      //   }
      // } else if (this.warehouseTypeHeader == 2) {
      //   // 出库
      //   arr = [14, 15];
      //   if (this.lookTypeHeader == 2) {
      //     arr = [14]; // 门禁
      //   } else if (this.lookTypeHeader == 1) {
      //     arr = [15];
      //   }
      // } else {
      //   arr = [12, 13, 17, 14, 15]; // 查出入库两种类型
      //   if (this.lookTypeHeader == 2) {
      //     arr = [13, 14]; // 门禁
      //   } else if (this.lookTypeHeader == 1) {
      //     arr = [12, 17, 15];
      //   }
      // }

      // this.selectData.operateType = arr;
      this.getWarehouseRecord();
    },
    // 选择项变化
    selectionChange(selectArr) {
      this.toApplyNum = selectArr.length;
      this.selectedList = selectArr;
    },

    // 操作日志   入：12, 13, 17   出库：14, 15

    getWarehouseRecord() {
      this.selectData = {
        ...this.selectData,
        startTime:
          this.createdOnHeader &&
          parseInt(new Date(this.createdOnHeader[0]).getTime() / 1000),
        endTime:
          this.createdOnHeader &&
          parseInt(new Date(this.createdOnHeader[1]).getTime() / 1000),
        userId: this.userId,

        actionType: this.warehouseTypeHeader,
      };

      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };

      this.isLoading = true;
      getInOrOutLogList(this.selectData, params)
        .then((res) => {
          res.data.map((e) => {
            e.createdOn = this.$moment(e.createdOn * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          this.recordList = res.data;
          this.total = res.total;
          this.isLoading = false;
        })
        .catch(() => {
          this.isLoading = false;
        });
    },
    // 导出出入库记录
    outExcel() {
      this.isExcelLoading = true;
      axios({
        headers: {
          Authorization: JSON.parse(Cookies.get("userInfo")).token,
        },
        url: '/api/depot/actionLog/exportInOrOutList',
        method: "post",
        responseType: "blob", // 后台响应数据类型
        data: this.selectData,
      }).then((response) => {
        this.isExcelLoading = false;
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        let fname =
          "出入库记录_" +
          this.$moment(new Date()).format("YYYY-MM-DD") +
          ".xlsx";
        link.href = url;
        link.setAttribute("download", fname);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },

  },
};
</script>

<style lang="scss" scoped>
.apply-operate {
  margin-bottom: 15px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.box-code {
  display: flex;
  align-items: center;
  .el-image-box {
    height: 60px;
    width: 80px;
    margin-right: 10px;
    text-align: center;
    .el-image {
      height: 100%;
    }
  }
  .title {
    font-size: 12px;
    font-weight: 550;
    color: #333;
  }
}

// 列表中的tag
.cell-tag {
  .box-tag {
    margin-bottom: 5px;
    // cursor: pointer;
  }
  .box-tag-end {
    cursor: pointer;
  }
}
</style>
